<template>
  <!-- 订单管理 -->
  <div id="order_all">
    <div class="nav">
      <hy-search
        class="search_box"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :button="{btnShowBy3:true}"
        :buttonText="{btnNameBy3:'新增订单'}"
        :col="6"
        @search="getlist(0)"
        @clickbybtn3="add()"
      ></hy-search>
    </div>

    <div class="table2_box">
      <template>
        <el-table :data="tableData" style="width: 100%" height="631" stripe>
          <el-table-column prop="xuhao" label="序号" align="center"></el-table-column>
          <el-table-column prop="orderno" label="订单号" align="center"></el-table-column>
          <el-table-column prop="compony" label="企业名称" align="center"></el-table-column>
          <el-table-column prop="paystyle" label="付款方式" align="center"></el-table-column>
          <el-table-column prop="createon" label="下单时间" align="center"></el-table-column>
          <el-table-column prop="deliverydate" label="交货日期" align="center"></el-table-column>
          <el-table-column prop="ordtype" label="订单类型" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <el-row slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.state=='待开票'"
                type="warning"
                @click="dialogVisible1 = true"
              >申请开票</el-button>
              <el-button
                size="mini"
                v-if="scope.row.state=='待发货'"
                type="warning"
                @click="fahuo(scope.row.orderno)"
              >申请发货</el-button>
              <el-button size="mini" type="primary" @click="orderdetails(scope.row.orderno)">详情</el-button>
            </el-row>
          </el-table-column>
        </el-table>
      </template>
      <el-dialog
        title="发货申请"
        :visible.sync="dialogVisible"
        width="70%"
        :modal-append-to-body="false"
      >
        <div class="color_box"></div>
        <div class="delivery_application">
          <div class="header_box">
            <ul>
              <li>
                <span>企业名称:</span>
                <el-input v-model="a" placeholder="请输入企业名称" style="width:70%;margin:0" readonly></el-input>
              </li>
              <li>
                <span>收货人:</span>
                <el-input v-model="b" placeholder="请输入收货人" style="width:70%;margin:0" readonly></el-input>
              </li>
              <li>
                <span>联系方式:</span>
                <el-input v-model="c" placeholder="请输入联系方式" style="width:70%;margin:0" readonly></el-input>
              </li>
              <li>
                <span>收货地址:</span>
                <el-input v-model="d" placeholder="请输入收货地址" style="width:70%;margin:0" readonly></el-input>
              </li>
            </ul>
          </div>
          <p>货物信息</p>
          <div class="cargo_information">
            <template>
              <el-table
                ref="fahoudata"
                @selection-change="xaunzhon"
                :data="tableData1"
                tooltip-effect="dark"
                style="width: 100%"
                height="250px"
                stripe
              >
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column prop="proname" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="protype" label="产品类型" align="center"></el-table-column>
                <el-table-column prop="unit" label="计量单位" align="center"></el-table-column>
                <el-table-column prop="neednum" label="需求数量" align="center"></el-table-column>
                <el-table-column prop="kucunnum" label="库存数量" align="center"></el-table-column>
                <el-table-column prop="lastnum" label="剩余数量" align="center"></el-table-column>
                <el-table-column label="本次发货" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.bcnum"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="fahuook()">确定</el-button>
          <el-button type="info" size="medium" @click="dialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="开票申请"
        :visible.sync="dialogVisible1"
        width="70%"
        :modal-append-to-body="false"
      >
        <div class="color_box"></div>
        <div class="delivery_application">
          <div class="header_box">
            <ul>
              <li>
                <span>企业名称:</span>
                <el-input v-model="name" placeholder="请输入企业名称" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>收货人:</span>
                <el-input v-model="people" placeholder="请输入收货人" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>联系方式:</span>
                <el-input v-model="phone" placeholder="请输入联系方式" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>收货地址:</span>
                <el-input v-model="address" placeholder="请输入收货地址" style="width:70%;margin:0"></el-input>
              </li>
            </ul>
          </div>
          <p>货物信息</p>
          <div class="cargo_information">
            <!-- @selection-change="handleSelectionChange" -->
            <template>
              <el-table
                ref="multipleTable"
                :data="tableData1"
                tooltip-effect="dark"
                style="width: 100%"
                height="250px"
                stripe
              >
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="address" label="产品类型" align="center"></el-table-column>
                <el-table-column prop="name" label="计量单位" align="center"></el-table-column>
                <el-table-column prop="address" label="需求数量" align="center"></el-table-column>
                <el-table-column prop="address" label="发货数量" align="center"></el-table-column>
                <el-table-column prop="address" label="结算单价(元)" align="center">
                  <template>
                    <el-input></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="小计(元)" align="center"></el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div class="total">
          合计金额
          <el-input style="width:70%"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="dialogVisible1 = false">确定</el-button>
          <el-button type="info" size="medium" @click="dialogVisible1 = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fahoudata: [],
      total: 1,
      current: 1,
      pagesize: 11,
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      formInline: {},
      name: "",
      people: "",
      phone: "",
      address: "",
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      tableData1: [],
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入订单号",
          prop: "customProductName"
        },
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      a: "",
      b: "",
      c: "",
      d: "",
      ddh: ""
    };
  },
  created() {
    this.getlist(0);
  },
  methods: {
    //多选发货
    xaunzhon(val) {
      this.fahoudata = val;
    },
    //发货
    fahuo(orderno) {
      this.ddh = orderno;
      this.dialogVisible = true;
      let arr = { id: 1, orderno: orderno };
      let arr1 = JSON.stringify(arr);
      axios("apis/SalesManagement.asmx/OrdmanPK?index=4&jsondata=" + arr1).then(
        ({ data }) => {
          let data1 = this.$x2js.xml2js(data);
          let data3 = JSON.parse(data1.string.__text);
          this.d = data3.address;
          this.a = data3.compony;
          this.b = data3.linkman;
          this.c = data3.phone;
          let fhval = [];
          data3.lstpro.forEach(item => {
            fhval.push(item);
          });
          this.tableData1 = fhval;
        }
      );
    },
    //发货确定
    fahuook() {
      let val = [];
      for (var i = 0; i < this.fahoudata.length; i++) {

        let Id = this.fahoudata[i].Id;
        let bcnum = this.fahoudata[i].bcnum;
        let obj = {Id,bcnum};
        val.push(obj);
      }
      let arr = { id: 2, orderno: this.ddh, lstme: val };
      let arr1 = JSON.stringify(arr);
      axios("apis/SalesManagement.asmx/OrdmanPK?index=4&jsondata=" + arr1).then(
        ({ data }) => {
          let data1 = this.$x2js.xml2js(data);
          let data3 = data1.string.__text;
           if (data3 == "ok") {
            this.$message({
              message: "发货成功",
              type: "success"
            });
            this.getlist(0);
          } else {
            this.$message.error("发货失败");
          }

        }
      );
    },
    // 分页
    handleCurrentChange(e) {
      this.getlist(e - 1);
    },
    //列表数据
    getlist(page) {
      let arr = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : "",
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      let arr1 = JSON.stringify(arr);
      axios("apis/SalesManagement.asmx/OrdmanPK?index=1&jsondata=" + arr1).then(
        ({ data }) => {
          let data1 = this.$x2js.xml2js(data);
          let data3 = JSON.parse(data1.string.__text);
          var val = [];
          data3.lstall.forEach(item => {
            val.push(item);
          });
          this.tableData = val;
          for (var i = 0; i < this.tableData.length; i++) {
            var dd = new Date(
              parseInt(this.tableData[i].createon.substr(6, 13))
            );
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = dd.getDate();
            d = d < 10 ? "0" + d : d;
            this.tableData[i].createon = y + "-" + m + "-" + d + " ";
            var dd1 = new Date(
              parseInt(this.tableData[i].deliverydate.substr(6, 13))
            );
            var y1 = dd1.getFullYear();
            var m1 = dd1.getMonth() + 1;
            m1 = m1 < 10 ? "0" + m1 : m1;
            var d1 = dd1.getDate();
            d1 = d1 < 10 ? "0" + d1 : d1;
            this.tableData[i].deliverydate = y1 + "-" + m1 + "-" + d1 + " ";
            this.tableData[i].xuhao = 1 + i + 11 * page;
          }
        }
      );
    },
    //详情
    orderdetails(orderno) {
      this.$router.push({
        path: "/pickuptruckXq",
        query: { orderno: orderno }
      });
    },
    //新增
    add() {
      this.$router.push("/pickuptruckAdd");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  background: $white;
  height: 50px;
  margin-top: 10px;
  width: 98%;
  padding: 0 1%;
  .search_box {
    width: 98%;
    padding-top: 5px;
  }
}

.table2_box {
  margin-top: 10px;
}
.block {
  text-align: center;
  padding-top: 10px;
}
.delivery_application {
  p {
    height: 40px;
    margin: 10px 0;
    font-weight: bold;
    line-height: 40px;
    span {
      background: $red;
      color: $red;
    }
  }
}
.header_box {
  width: 100%;
  height: 150px;
  overflow: hidden;
  margin: 0 auto;
}
.header_box ul {
  height: 150px;
  padding-right: 10%;
}
.header_box li {
  float: left;
  line-height: 50px;
  width: 50%;
  height: 50px;
  text-align: right;
  margin-top: 10px;
}

.color_box {
  width: 5px;
  height: 20px;
  background-color: $red;
  position: absolute;
  top: 22px;
  left: 10px;
}
.total {
  height: 50px;
  line-height: 50px;
  width: 20%;
  display: flex;
  justify-content: space-between;
  position: relative;
  bottom: -50px;
}
</style>
<style>
.el-dialog__footer {
  text-align: center;
}
#order_all .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
